<template>
    <div>
        <Title title="订单编辑">
        </Title>
        <el-form class="goods-form" v-if="data">
            <el-form-item label="订单号" label-width="80px">
                <el-input size="large" v-model="data.orderNo" style="width: 300px;"></el-input>
            </el-form-item>
            <el-form-item label="下单时间" label-width="80px">
                <el-input size="large" v-model="data.orderTime" style="width: 300px;"></el-input>
            </el-form-item>
            <el-form-item label="联系电话"label-width="80px">
                <el-input size="large" v-model="data.phone" style="width: 300px;"></el-input>
            </el-form-item>
            <el-form-item label="收货人" label-width="80px">
                <el-input size="large" v-model="data.consignee" style="width: 300px;"></el-input>
            </el-form-item>
            <el-form-item label="送货地址" label-width="80px">
                <el-input size="large" v-model="data.deliverAddress" style="width: 300px;"></el-input>
            </el-form-item>
            <el-form-item label="送达时间" label-width="80px">
                <el-input size="large" v-model="data.deliveryTime" style="width: 300px;"></el-input>
            </el-form-item>
            <el-form-item label="备注" label-width="80px">
                <el-input size="large" v-model="data.remarks" style="width: 300px;"></el-input>
            </el-form-item>
            <el-form-item label="订单金额" label-width="80px">
                <el-input size="large" v-model="data.orderAmount" style="width: 300px;"></el-input>
            </el-form-item>
            <el-form-item label="订单状态" label-width="80px">
                <el-input size="large" v-model="data.orderState" style="width: 300px;"></el-input>
            </el-form-item>
            <el-form-item >
                <el-button type="primary" @click="update">修改订单</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import Title from '@/views/home/component/Title.vue';
import { useRoute, useRouter } from 'vue-router';
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { getOrderDetail,updateOrder } from '@/api/order.js';
import moment from 'moment'//时间处理插件
const route = useRoute();
const router = useRouter();
//获取id
const id = ref(route.query.id);
const data = ref({
    orderNo: '',
    orderTime: '',
    phone: '',
    consignee: '',
    deliverAddress: '',
    deliveryTime: '',
    remarks: '',
    orderAmount: '',
    orderState: '',
})

//获取订单详情
const getDetail = async()=>{
   const res = await getOrderDetail({id:id.value});
   data.value = res.data;
   data.value.orderTime = moment(data.value.orderTime).format('YYYY-MM-DD HH:mm:ss')
   data.value.deliveryTime = moment(data.value.deliveryTime).format('YYYY-MM-DD HH:mm:ss')
 }
 getDetail();

 //修改订单
 const update = async()=>{
    data.value={id:id.value,...data.value}
    const res = await updateOrder(data.value);
    if(res.code === 0){
        ElMessage.success(res.msg)
        router.push('/orderList')
    }else{
        ElMessage.error(res.msg)
    }
 }
</script>

<style scoped>
.img {
    width: 178px;
    height: 178px;
}

.goods-form {
    margin-top: 20px;
    margin-left: 12px;
}

.btn {
    margin-left: 68px;
}
</style>